import { _decorator, Component, Sprite, SpriteFrame, input, Input, KeyCode, Node, Vec3, EventKeyboard } from 'cc';
import { MapStamp } from './MapStamp';
import { Vec2 } from 'cc';
import { Size } from 'cc';
import { UITransform } from 'cc';
import { EventHandler } from 'cc';
import { v3 } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

export class DiceState {
  DICE_SUM = 7;
  constructor(public bottom: number, public north: number, public south: number, public west: number, public east: number) {
  }

  position = new Vec2(0, 0);
  _moveRange: Vec2 = new Vec2(8, 8);

  get moveRange(){
    return this._moveRange;
  }
  set moveRange(value: Vec2){
    this._moveRange = value;
  }

  rollUp() {
    if (this.position.y >= this.moveRange.y - 1) {
      return;
    }
    const oldBottom = this.bottom;
    this.bottom = this.north;
    this.south = oldBottom; 
    this.north = this.DICE_SUM - oldBottom;
    this.position.y += 1;
  }

  rollDown(){
    if (this.position.y <= 0) {
      return;
    }
    const oldBottom = this.bottom;
    this.bottom = this.south;
    this.north = oldBottom;
    this.south = this.DICE_SUM - oldBottom;
    this.position.y -= 1;
  }

  rollLeft(){
    if (this.position.x <= 0) {
      return;
    }
    const oldBottom = this.bottom;
    this.bottom = this.west;
    this.east = oldBottom;
    this.west = this.DICE_SUM - oldBottom;
    this.position.x -= 1;
  }

  rollRight(){
    if (this.position.x >= this.moveRange.x - 1) {
      return;
    }
    const oldBottom = this.bottom;
    this.bottom = this.east;
    this.west = oldBottom;
    this.east = this.DICE_SUM - oldBottom;
    this.position.x += 1;
  }

  get up(){
    return this.DICE_SUM - this.bottom;
  }
}

@ccclass('Dice')
@executeInEditMode(true)
export class Dice extends Component {
  @property(Size)
  _diceSize: Size = new Size(100, 100);

  @property(Size)
  get diceSize(){
    return this._diceSize;
  }
  set diceSize(value: Size){
    this._diceSize = value;
    this.setupDices();
  }

  setupDices(){
    // 把4个面放到正确的位置上
    this.northFace.node.setPosition(0, this.diceSize.height, 0);
    this.southFace.node.setPosition(0, -this.diceSize.height, 0);
    this.westFace.node.setPosition(-this.diceSize.width, 0, 0);
    this.eastFace.node.setPosition(this.diceSize.width, 0, 0);
    // 调整4个面的大小
    this.northFace.getComponent(UITransform).setContentSize(this.diceSize);
    this.southFace.getComponent(UITransform).setContentSize(this.diceSize);
    this.westFace.getComponent(UITransform).setContentSize(this.diceSize);
    this.eastFace.getComponent(UITransform).setContentSize(this.diceSize);

    // 调整中间大小
    this.getComponent(UITransform).setContentSize(this.diceSize);
  }

  @property(SpriteFrame)
  cubeFaces: SpriteFrame[] = [];

  // @property(MapStamp) // 地圖
  // groundMap: MapStamp = null;

  @property(Sprite)
  northFace: Sprite = null;

  @property(Sprite)
  southFace: Sprite = null;

  @property(Sprite)
  westFace: Sprite = null;

  @property(Sprite)
  eastFace: Sprite = null;

  currentUpNumber: number = 1; // 当前向上的数字
  state: DiceState = null;

  
  get moveRange(){
    return this.state.moveRange;
  }
  set moveRange(value: Vec2){
    this.state.moveRange = value;
  }

  start() {
    // 初始化骰子面
    this.updateUI();
  }

  protected onLoad(): void {
    this.state = new DiceState(1, 2, 5, 3, 4);
    this.setupDices();
    // 監聽鍵盤事件
    input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
  }

  onDestroy() {
    // 解除鍵盤事件監聽
    input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
  }

  onKeyDown(event: EventKeyboard) {
    switch (event.keyCode) {
      case KeyCode.ARROW_UP:
        this.rollUp();
        break;
      case KeyCode.ARROW_DOWN:
        this.rollDown();
        break;
      case KeyCode.ARROW_LEFT:
        this.rollLeft();
        break;
      case KeyCode.ARROW_RIGHT:
        this.rollRight();
        break;
    }
  }

  rollUp(){
    this.state.rollUp();
    this.notifyOnRoll();
    this.updateUI();
  }

  rollDown(){
    this.state.rollDown();
    this.notifyOnRoll();
    this.updateUI();
  }

  rollLeft(){
    this.state.rollLeft();
    this.notifyOnRoll();
    this.updateUI();
  }

  rollRight(){
    this.state.rollRight();
    this.notifyOnRoll();
    this.updateUI();
  }

  getSpriteFrameByNumber(number: number): SpriteFrame {
    return this.cubeFaces[number - 1];
  }
  
  // 骰子滚动后的通知事件
  @property(EventHandler)
  onRollEvent: EventHandler = new EventHandler();
  notifyOnRoll(){
    this.onRollEvent.emit([this.state]);
  }

  baseLocation: Vec3 = new Vec3(0, 0, 0);

  updateUI(){
    // 设置位置
    const pos = this.baseLocation.clone().add(v3(this.state.position.x * this.diceSize.width, this.state.position.y * this.diceSize.height, 0));
    this.node.setPosition(pos);

    // 中间展示底面
    this.getComponent(Sprite).spriteFrame = this.getSpriteFrameByNumber(this.state.bottom);

    // 设置其他面
    this.northFace.spriteFrame = this.getSpriteFrameByNumber(this.state.north);
    this.southFace.spriteFrame = this.getSpriteFrameByNumber(this.state.south);
    this.westFace.spriteFrame = this.getSpriteFrameByNumber(this.state.west);
    this.eastFace.spriteFrame = this.getSpriteFrameByNumber(this.state.east);
  }


  // updateGround(bottomFaceSprite: SpriteFrame) {
  //   if (this.groundMap) {
  //     // 將底面貼圖應用到地圖當前位置的格子上
  //     this.groundMap.addStamp(this.currentPosition, bottomFaceSprite);
  //   }
  // }
}
